<template>
  <el-dialog class="partyInfo" v-model="showPartyNew" title="党建基本信息" width="500px" center>
    <el-form ref="refPartyForm" :model="partyInfo"  :rules="verifyRules" label-width="80px">
      <div class="partyForm">
        <el-form-item prop="partyName" label="支部名称">
          <el-select v-model="partyInfo.partyName" style="width: 100%">
            <el-option
                v-for="item in partyNameOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="partyTime" label="年度">
          <el-date-picker
              ref="partyTime"
              v-model="partyInfo.partyTime"
              type="year"
              format="YYYY"
              value-format="YYYY"
              placeholder="选择年度"
              style="width: 100%"
          />
        </el-form-item>
      </div>
      <el-button :loading="loading" type="primary" style="width:100%;margin-top:20px;"
                 @click.prevent="handleAdd(refPartyForm)">提 交</el-button>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
import {useConfigStore} from "@/store/config";
import {onMounted, reactive, ref, SetupContext, watch} from "vue";
import {storeToRefs} from "pinia";
import {FormInstance, FormRules} from "element-plus";
import {useUserStore} from "@/store/user";
import {addPartyBuilding, getPartyName} from "@/api/party";
import {DialogUtils} from "@/utils/DialogUtils";
import {IPartyName} from "@/iwb/IParty";

export default {
  name: "PartyNew",
  props: {
    refresh: {
      type: Boolean,
      default: false,
    }
  },
  setup(props: any, {emit}:SetupContext) {
    const loading = ref(false);
    const useConfig = useConfigStore()
    const refPartyForm = ref<FormInstance>();
    const {showPartyNew, partyInfo} = storeToRefs(useConfig);
    const partyNameOptions = ref([] as Array<IPartyName>);

    const verifyRules = reactive<FormRules>({
      partyName: [{required: true, trigger: 'blur', message: '请输入支部名称'}],
      partyTime: [{required: true, trigger: 'blur', message: '请输入年度'}],
    })

    const handleAdd = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      const userStore = useUserStore();
      loading.value = true;
      formEl.validate((valid: boolean, fields) => {
        console.warn(partyInfo.value);
        addPartyBuilding(partyInfo.value).then(()=>{
          partyInfo.value.partyName = '';
          partyInfo.value.partyTime = '';
          showPartyNew.value = false;
          emit('reload');
          loading.value = false;
        }).catch(error => {
          loading.value = false;
          console.error(error);
          DialogUtils.showErrorBox("错误提示", '添加党建信息失败');
          return;
        })
      }).catch(erro => {
        console.error(erro);
        loading.value = false;
      });
    }

    onMounted(() => {
      getPartyName( 1, 1000).then((res: any) => {
        partyNameOptions.value = res.data.names;
      })
    })

    watch(()=> showPartyNew.value, (newData, oldData) => {
      console.warn(newData);
      if (newData) {
        getPartyName( 1, 1000).then((res: any) => {
          partyNameOptions.value = res.data.names;
          props.refresh = false;
        })
      }
    })

    return {
      loading,
      refPartyForm,
      showPartyNew,
      partyInfo,
      partyNameOptions,
      verifyRules,
      handleAdd
    }
  }
}
</script>

<style scoped lang="scss">
.partyInfo {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.partyForm {
  margin: 10px;

  :deep(.partyForm) {
    .el-select {
      width: 100%;
    }
  }
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>